export function H5drag(containerRef, options) {
    const { dragenterCb, dragoverCb, dragleaveCb, dropCb, dragstartCb, dragendCb } = options
    let currentComponent = null;
    const dragenter = (e) => {
        e.dataTransfer.dropEffect = 'move';
        dragenterCb && dragenterCb(e);
    }
    const dragover = (e) => {
        e.preventDefault();
        dragoverCb && dragoverCb(e);
    }
    const dragleave = (e) => {
        e.dataTransfer.dropEffect = 'none';
        dragleaveCb && dragleaveCb(e);
    }
    const drop = (e) => {
        dropCb && dropCb(e, currentComponent);
        currentComponent = null;
    }
    const dragstart = (e, component) => {
        containerRef.$el.addEventListener('dragenter', dragenter)
        containerRef.$el.addEventListener('dragover', dragover)
        containerRef.$el.addEventListener('dragleave', dragleave)
        containerRef.$el.addEventListener('drop', drop)
        currentComponent = component;
        containerRef.dragBefore && containerRef.dragBefore();
        dragstartCb && dragstartCb(e)
    }
    const dragend = e => {
        containerRef.$el.removeEventListener('dragenter', dragenter)
        containerRef.$el.removeEventListener('dragover', dragover)
        containerRef.$el.removeEventListener('dragleave', dragleave)
        containerRef.$el.removeEventListener('drop', drop)
        containerRef.dragBefore && containerRef.dragAfter();
        dragendCb && dragendCb(e)
    }
    return {
        dragstart,
        dragend
    }
}